$tag1:null;
$tag2:null;
$tag3:null;
$tag4:null;

//弹性盒封装
.fbox{display: flex;justify-content:center;align-items:center;flex-wrap: nowrap;/*默认居中，常用*/
	&.inline{
		display: inline-flex;
	}
	//水平
	&.H{flex-direction:row;
		//主轴-横向
		&.x{
			&-left{justify-content:flex-start;}
			&-right{justify-content:flex-end;}
			&-center{justify-content:center;}
			&-around{justify-content:space-around;}
			&-between{justify-content:space-between;}
			&-evenly{justify-content:space-evenly;}
		}
		//副轴-竖向
		&.y{
			&-top{align-items: flex-start;}
			&-bottom{align-items: flex-end;}
			&-center{align-items: center;}
			&-base{align-items: baseline;}
			&-full{align-items: stretch;}
		}
		&.rev{flex-direction:row-reverse;
			&.x-left{justify-content:flex-end;}
			&.x-right{justify-content:flex-start;}
		}
		//单独副轴
		>.self-top{align-self: flex-start;}
		>.self-bottom{align-self: flex-end;}
		//多行
		&.wrap{
			&-top{align-content:flex-start;}
			&-bottom{align-content:flex-end;}
		}
	}
	//垂直
	&.V{flex-direction:column;justify-content:flex-start;/*默认居顶，居中*/
		//主轴-竖向
		&.y{
			&-top{justify-content:flex-start;}
			&-bottom{justify-content:flex-end;}
			&-center{justify-content:center;}
			&-around{justify-content:space-around;}
			&-between{justify-content:space-between;}
			&-evenly{justify-content:space-evenly;}
		}
		//副轴-横向
		&.x{
			&-left{align-items: flex-start;}
			&-right{align-items: flex-end;}
			&-center{align-items: center;}
			&-base{align-items: baseline;}
			&-full{align-items: stretch;}
		}
		
		&.rev{flex-direction:column-reverse;
			&.y-top{justify-content:flex-end;}
			&.y-bottom{justify-content:flex-start;}
		}
		//单独副轴
		>.self-left{align-self: flex-start;}
		>.self-right{align-self: flex-end;}
		//多列
		&.wrap{
			&-left{align-content:flex-start;}
			&-right{align-content:flex-end;}
		}
	}
	//单独副轴
	>.self-center{align-self: center;}
	>.self-base{align-self: baseline;}
	>.self-full{align-self: stretch;}
	//通用多行&多列
	&.wrap{flex-wrap: wrap;align-content:flex-start;
		&-center{align-content:center;}
		&-around{align-content:space-around;}
		&-between{align-content:space-between;}
		&-full{align-content:stretch;}
	}
	//扩展
	>.grow{flex-grow: 1;}
	>.noshrink{flex-shrink: 0;}
	//序列
	>.first{order:-999;}
	>.last{order: 999;}
	>.order1{order: 1;}
	>.order2{order: 2;}
	>.order3{order: 3;}
	>.order4{order: 4;}
	>.order5{order: 5;}
	>.order6{order: 6;}
	>.order7{order: 7;}
	>.order8{order: 8;}
	>.order9{order: 9;}
}

//间距封装
$dicSpSize:(
	auto: auto,
	0: 0,
	xs: $vi-space-xs,
	sm: $vi-space-sm,
	md: $vi-space-md,
	lg: $vi-space-lg,
	xl: $vi-space-xl
);
$dicSpDir:(
	t:top,
	r:right,
	b:bottom,
	l:left
);
$spLength:2;
$dicSpDecimal:25,5,75;
@each $spType, $spTypeVal in (m:margin, p:padding) {
	@each $spSize, $spSizeVal in $dicSpSize{
		.#{$spType}-#{$spSize}{#{$spTypeVal}:#{$spSizeVal} !important;}
		.#{$spType}x-#{$spSize}{#{$spTypeVal}-left:#{$spSizeVal} !important; #{$spTypeVal}-right:#{$spSizeVal} !important;}
		.#{$spType}y-#{$spSize}{#{$spTypeVal}-top:#{$spSizeVal} !important; #{$spTypeVal}-bottom:#{$spSizeVal} !important;}
	}
	@each $spDir, $spDirVal in $dicSpDir {
		@each $spSize, $spSizeVal in $dicSpSize{
			.#{$spType}#{$spDir}-#{$spSize}{#{$spTypeVal}-#{$spDirVal}:#{$spSizeVal} !important;}
		}
	}
	//字符型
	@if $useEmSpace{
		@each $spUnit, $spUnitVal in (re:rem, e:em) {
			@for $i from 0 through $spLength{
				@if $i > 0{
					.#{$spType}-#{$spUnit}#{$i}{#{$spTypeVal}:#{$i}#{$spUnitVal} !important;}
					.#{$spType}x-#{$spUnit}#{$i}{#{$spTypeVal}-left:#{$i}#{$spUnitVal} !important; #{$spTypeVal}-right:#{$i}#{$spUnitVal} !important;}
					.#{$spType}y-#{$spUnit}#{$i}{#{$spTypeVal}-top:#{$i}#{$spUnitVal} !important; #{$spTypeVal}-bottom:#{$i}#{$spUnitVal} !important;}
					@each $spDir, $spDirVal in $dicSpDir {
						.#{$spType}#{$spDir}-#{$spUnit}#{$i}{#{$spTypeVal}-#{$spDirVal}:#{$i}#{$spUnitVal} !important;}
					}
				}
				@if $i < 2{
					@each $spDecimal in $dicSpDecimal{
						.#{$spType}-#{$spUnit}#{$i}p#{$spDecimal}{#{$spTypeVal}:#{$i}#{"."}#{$spDecimal}#{$spUnitVal} !important;}
						.#{$spType}x-#{$spUnit}#{$i}p#{$spDecimal}{#{$spTypeVal}-left:#{$i}#{"."}#{$spDecimal}#{$spUnitVal} !important; #{$spTypeVal}-right:#{$i}#{"."}#{$spDecimal}#{$spUnitVal} !important;}
						.#{$spType}y-#{$spUnit}#{$i}p#{$spDecimal}{#{$spTypeVal}-top:#{$i}#{"."}#{$spDecimal}#{$spUnitVal} !important; #{$spTypeVal}-bottom:#{$i}#{"."}#{$spDecimal}#{$spUnitVal} !important;}
						@each $spDir, $spDirVal in $dicSpDir {
							.#{$spType}#{$spDir}-#{$spUnit}#{$i}p#{$spDecimal}{#{$spTypeVal}-#{$spDirVal}:#{$i}#{"."}#{$spDecimal}#{$spUnitVal} !important;}
						}
					}
				}
			}
		}
	}
}

//宽度封装
$dicWType:(
	w:width,
	xw:max-width,
	nw:min-width,
	fw:flex
);
$dicResponseWType:(
	w:width,
	fw:flex
);
$WLength:10;
$dicWPercent:(
	"3-1":1/3, "3-2":2/3,
	"6-1":1/6, "6-5":5/6,
	"8-1":1/8, "8-3":3/8, "8-5":5/8, "8-7":7/8
);
@each $WType, $WTypeVal in $dicWType{
	$tag1:if($WTypeVal==flex, "0 0 ", "");
	//百分比
	@for $i from 0 through 10{
		@if $i == 0{
			.#{$WType}-5{#{$WTypeVal}:#{$tag1}#{"5%"}; }
		}@else{
			.#{$WType}-#{$i}0{#{$WTypeVal}:#{$tag1}#{$i}#{"0%"}; }
			.#{$WType}-#{$i}5{#{$WTypeVal}:#{$tag1}#{$i}#{"5%"}; }
		}
	}
	//分数
	@each $WPercent, $WPercentVal in $dicWPercent{
		.#{$WType}-#{$WPercent}{#{$WTypeVal}:#{$tag1}#{$WPercentVal*100}#{"%"}; }
	}
	//字符
	@each $WUnit, $WUnitVal in (re:rem, e:em) {
		@for $i from 0 through $WLength{
			@if $i > 0{
				.#{$WType}-#{$WUnit}#{$i}{#{$WTypeVal}:#{$tag1}#{$i}#{$WUnitVal}; }
			}
			.#{$WType}-#{$WUnit}#{$i}p5{#{$WTypeVal}:#{$tag1}#{$i}#{".5"}#{$WUnitVal}; }
		}
	}
}

//高度封装
$dicHType:(
	h:height,
	xh:max-height,
	nh:min-height
);
$HLength:8;
$dicHPercent:(
	"3-1":1/3, "3-2":2/3,
	"6-1":1/6, "6-5":5/6
);
@each $HType, $HTypeVal in $dicHType{
	//百分比
	@for $i from 1 through 10{
		.#{$HType}-#{$i}0{#{$HTypeVal}:#{$i}#{"0%"}; }
	}
	//分数
	@each $HPercent, $HPercentVal in $dicHPercent{
		.#{$HType}-#{$HPercent}{#{$HTypeVal}: #{$HPercentVal*100}#{"%"}; }
	}
	//字符
	@each $HUnit, $HUnitVal in (re:rem, e:em) {
		@for $i from 0 through $HLength{
			@if $i > 0{
				.#{$HType}-#{$HUnit}#{$i}{#{$HTypeVal}:#{$i}#{$HUnitVal}; }
			}
			.#{$HType}-#{$HUnit}#{$i}p5{#{$HTypeVal}:#{$i}#{".5"}#{$HUnitVal}; }
		}
	}
}

//行高封装
$dicLHDecimal:2,4,5,6,7,8;
$LHLength:2;
@for $i from 1 through $LHLength{
	.lh-#{$i}{line-height:#{$i};}
	@each $LHDecimal in $dicLHDecimal {
		.lh-#{$i}p#{$LHDecimal}{line-height:#{$i}#{"."}#{$LHDecimal};}
	}
}

//边框封装
$dicBorDir:(
	all:null,
	t:top,
	r:right,
	b:bottom,
	l:left
);
$dicBorType:solid, dotted, dashed, none;
$borWidth:2;
$dicBorColor:(
	default:$vi-borColor-default,
	light:$vi-borColor-light,
	primary:$vi-color-primary
);
@each $borDir, $borDirVal in $dicBorDir {
	$tag1:if($borDir==all, "", $borDir);
	$tag2:if($borDir==all, "", "-"+$borDirVal);
	@each $borType in $dicBorType {
		@if $borType == none{
			.b#{$tag1}-none{border#{$tag2}:none !important ;}
		}@else{
			@for $i from 1 through $borWidth{
				@if $i == 1{
					$tag3:if($borType==solid, "", "-"+$borType);
				}@else{
					$tag3:if($borType==solid, "-"+$i, "-"+$borType+$i);
				}
				@each $borColor, $borColorVal in $dicBorColor {
					.b#{$tag1}#{$tag3}-#{$borColor}{border#{$tag2}:#{$i}px #{$borType} #{$borColorVal} ;}
				}
			}
		}
	}
}

//圆角封装
$dicRadius:(
	xs:$vi-radius-xs,
	sm:$vi-radius-sm,
	md:$vi-radius-md,
	lg:$vi-radius-lg,
	xl:$vi-radius-xl
);
$radLength:5;
@each $radType, $radVal in $dicRadius {
	.r-#{$radType},
	.rlt-#{$radType}{ border-top-left-radius: $radVal;}
	.r-#{$radType},
	.rrt-#{$radType}{ border-top-right-radius: $radVal;}
	.r-#{$radType},
	.rlb-#{$radType}{ border-bottom-left-radius: $radVal;}
	.r-#{$radType},
	.rrb-#{$radType}{ border-bottom-right-radius: $radVal;}
}
@for $i from 1 through $radLength{
	.r#{$i}0{ border-radius: #{$i}0#{"%"};}
}

//字号封装
$dicFontSize:(
	xs: $vi-fontSize-xs,
	sm: $vi-fontSize-sm,
	md: $vi-fontSize-md,
	lg: $vi-fontSize-lg,
	xl: $vi-fontSize-xl,
	ex1: $vi-fontSize-ex1,
	ex2: $vi-fontSize-ex2,
	ex3: $vi-fontSize-ex3
);
@each $fontSize, $fontSizeVal in $dicFontSize {
	.fontSize-#{$fontSize}{font-size:#{$fontSizeVal}}
}

//字体颜色封装
$dicFontColor:(
	default: $vi-color-default,
	primary: $vi-color-primary,
	second: $vi-color-second,
	third: $vi-color-third,
	fourth: $vi-color-fourth,
	fifth: $vi-color-fifth,
	success: $vi-color-success,
	warning: $vi-color-warning,
	error: $vi-color-error,
	deep: $vi-txtColor-deep,
	light: $vi-txtColor-light,
	tips: $vi-txtColor-tips,
	disable: $vi-txtColor-disable,
	inverse: $vi-txtColor-inverse,
	link: $vi-txtColor-link,
	price: $vi-color-price,
	border: $vi-borColor-default,
	"border-light": $vi-borColor-light
);
@each $fontColor, $fontColorVal in $dicFontColor {
	.color-#{$fontColor}{color:#{$fontColorVal}}
}

//背景颜色封装
	//同步行为色
$dicBgColor:(
	default: $vi-color-default,
	primary: $vi-color-primary,
	second: $vi-color-second,
	third: $vi-color-third,
	fourth: $vi-color-fourth,
	fifth: $vi-color-fifth,
	success: $vi-color-success,
	warning: $vi-color-warning,
	error: $vi-color-error,
	grey: $vi-color-grey,
);
@each $bgColor, $bgColorVal in $dicBgColor {
	.bg-#{$bgColor}{background-color:#{$bgColorVal}}
}
	//独立背景色
$dicBg:(
	primary: $vi-bgColor-primary,
	success: $vi-bgColor-success,
	info: $vi-bgColor-info,
	warning: $vi-bgColor-warning,
	error: $vi-bgColor-error,
	default: $vi-bgColor-default,
	contrast: $vi-bgColor-contrast,
	panel: $vi-bgColor-panel
);
@each $bg, $bgVal in $dicBg {
	.bgColor-#{$bg}{background-color:#{$bgVal}}
}

//响应式封装
//xs小屏手机(小于375)、sm一般大屏手机(小于415)、md一般平板(小于800)、lg大平板(800以上)
@if $useResponse{
	$dicPageSize:(
		xs:$vi-response-xs,
		sm:$vi-response-sm,
		md:$vi-response-md,
		lg:$vi-response-lg
	);
	$dicSizeRange:(
		xs:(xs, sm, md, lg),
		sm:(sm, md, lg),
		md:(md, lg),
		lg:(lg)
	);
	@each $pageSize, $pageSizeVal in $dicPageSize {
		.pageSize-#{$pageSize}{font-size:#{map-get($dicFontSize, $vi-response-base) + $pageSizeVal}; }
		//字号
		@each $fontSize, $fontSizeVal in $dicFontSize {
			$res:$fontSizeVal + $pageSizeVal;
			.pageSize-#{$pageSize} .fontSize-#{$fontSize}{font-size:if($res > $vi-response-min, $res, $vi-response-min); }
		}
		//宽度
		@if $useResponseWidth{
			@each $WType, $WTypeVal in $dicResponseWType{
				$tag1:if($WTypeVal==flex, "0 0 ", "");
				//百分比
				@for $i from 0 through 10{
					$tag2:"";
					$tag3:"";
					@each $range in map-get($dicSizeRange, $pageSize){
						$tag2:$tag2+".pageSize-"+$range+" ."+$WType+"-"+if($i==0, "", $i)+"0-"+$pageSize+",";
						$tag3:$tag3+".pageSize-"+$range+" ."+$WType+"-"+if($i==0, "", $i)+"5-"+$pageSize+",";
					}
					@if $i == 0{
						#{$tag3}{#{$WTypeVal}:#{$tag1+"5%"}; }
					}@else{
						#{$tag2}{#{$WTypeVal}:#{$tag1+$i+"0%"}; }
						#{$tag3}{#{$WTypeVal}:#{$tag1+$i+"5%"}; }
					}
				}
				//分数
				@each $WPercent, $WPercentVal in $dicWPercent{
					.pageSize-#{$pageSize} .#{$WType}-#{$WPercent}-#{$pageSize}{#{$WTypeVal}:#{$tag1}#{$WPercentVal*100}#{"%"}; }
				}
				//字符
				@each $WUnit, $WUnitVal in (re:rem, e:em) {
					@for $i from 0 through $WLength{
						@if $i > 0{
							.pageSize-#{$pageSize} .#{$WType}-#{$WUnit}#{$i}-#{$pageSize}{#{$WTypeVal}:#{$tag1}#{$i}#{$WUnitVal}; }
						}
						.pageSize-#{$pageSize} .#{$WType}-#{$WUnit}#{$i}p5-#{$pageSize}{#{$WTypeVal}:#{$tag1}#{$i}#{".5"}#{$WUnitVal}; }
					}
				}
			}
		}
	}
}

//字体扩大
$fontSizeLength:15;
@for $i from 1 through $fontSizeLength{
	$tag1:$i +5;
	.fs#{$tag1}{ font-size: #{$tag1}0#{"%"} !important;}
}

//grid组件补充
	//单元格坐标
$gridPoint:12;
$gridSpan:12;
@for $i from 1 through $gridPoint{
	.vi_grid >.x-start#{$i} { grid-column-start: #{$i};}
	.vi_grid >.y-start#{$i} { grid-row-start: #{$i};}
	@if $i>0{
		.vi_grid >.x-end#{$i} { grid-column-end: #{$i};}
		.vi_grid >.y-end#{$i} { grid-row-end: #{$i};}
	}
}
	//合并单元格
@for $i from 1 through $gridSpan{
	.vi_grid >.colspan#{$i}, .vi_grid >.span#{$i} { grid-column-end: span #{$i};}
	.vi_grid >.rowspan#{$i}, .vi_grid >.span#{$i} { grid-row-end: span #{$i};}
}
	//简易层级
@for $i from 1 through 10{
	.vi_grid >.index#{$i}{ z-index: #{$i};}
}
	//内容对齐
.vi_grid >.x-left{ justify-self:start; }
.vi_grid >.x-right{ justify-self:end; }
.vi_grid >.x-center{ justify-self:center; }
.vi_grid >.x-full{ justify-self:stretch; }
.vi_grid >.y-top{ align-self:start; }
.vi_grid >.y-bottom{ align-self:end; }
.vi_grid >.y-center{ align-self:center; }
.vi_grid >.y-full{ align-self:stretch; }

//其他
	//显示
.inline-block{display: inline-block;}
	//浮动
.fl{float: left;}
.fr{float: right;}
.clearfix:after{content:""; clear:both; height: 0; display: block; visibility: hidden; line-height: 0;}

	//对齐
.text-center{text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}

	//超出隐藏
.over-hide{overflow: hidden}
.text-cut{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
$cutLength:5;
$tag1:"";
@for $i from 2 through $cutLength{
	$tag1:$tag1 +".text-cut"+ $i;
	@if $i < $cutLength{
		$tag1:$tag1 +","
	}
	.text-cut#{$i}{-webkit-line-clamp:#{$i}; }
}
#{$tag1}{display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

	//缩进
.indent{text-indent: 1em;}
.indent2{text-indent: 2em;}

	//字体
.bold{font-weight: bold;}
.italic{font-style: italic;}

	//换行
.breakWord{word-break: break-word;}
.breakAll{word-break: break-all;}

.borderbox{box-sizing: border-box;}

//初始化
html,body{
	font-size: $vi-fontSize-md;
	color: $vi-txtColor-default;
}